<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content modemain_list">
      <!--title-->
      <el-row>
        <el-col :span="24">
          <e-heading style="margin-top:0; margin-bottom:2px;" :grade="'1'">训练方式</e-heading>
          <span class="color_gray">培训机构可在此处设置训练方式，教练员可选择训练方式条目完善到相关课时，形成训练计划</span>
        </el-col>
      </el-row>
      <!--serach_form-->
      <el-form ref="form" v-bind="getFormProps()" style="margin:25px 0 0 0;">
        <el-row>
          <el-col :span="10" >
            <el-form-item label="运动类型：" label-width="85px">
              <el-select v-model="form.sportType" clearable placeholder="请选择运动类型" style="width:95%;" size="small">
                <el-option
                  v-for="item in mode_sport_list"
                  :key="item.fieldValue"
                  :label="item.fieldName"
                  :value="item.fieldValue">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" >
            <el-form-item label="" label-width="0">
              <el-input size="small" v-model="form.keyword" placeholder="请输入训练方式名称" style="width: 98%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="20px">
              <el-button size="small" type="primary-plain" native-type="submit">搜索</el-button>
              <el-button type="link" style="line-height:36px;" @click="handleShowSearch">更多筛选 <i :class="isShow ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i></el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-collapse-transition>
        <search-card v-show="isShow" @updateSearch="handleSearch" :serachQuery="serachQuery" :keys="serachQuery" v-if="isUpdate"></search-card>
      </el-collapse-transition>
      <!--list-->
      <el-row class="list-title">
        <el-col :span="12">
          <e-heading :grade="'1'">训练方式列表</e-heading>
        </el-col>
        <el-col :span="12" style="text-align:right;">
          <router-link :to="{path: '/training/trainingprogram/mode/add'}"><el-button type="primary" size="small">新增训练方式</el-button></router-link>
        </el-col>
      </el-row>
      <!--tabs-->
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="已通过" name="2"></el-tab-pane>
        <el-tab-pane label="待审核" name="0"></el-tab-pane>
        <el-tab-pane label="未通过" name="1"></el-tab-pane>
      </el-tabs>
      <div class="method-list" v-for="(item, index) in mode_style_list.list" :key="index">
        <mode-plan 
          :singleItem="item" 
          :activeName="activeName" 
          :modeSportList="mode_sport_list"
          @pass="handleSetYes"
          @deny="handleSetNo"
          @edit="handleDetail"
          @detail="handleDetail"
          @delete="handleDeLete"
          @export="handleExport"
          @resubmit="handleResubmit"/>
      </div>
      <!--无数据提示-->
      <e-placeholder text="暂无数据" src="/static/images/training/no_course.png" v-if="mode_style_list.total == 0"></e-placeholder>
      <!--分页-->
      <el-pagination
        v-bind="getPaginationProps(mode_style_list)"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { pagingList } from 'utils/mixins' // 引入form mixin
import { ModeData } from './modeData'
import SearchCard from './components/SearchCard'
import { mapGetters } from 'vuex'
import api from 'api/trainingProgram'
import ModePlan from '../plan/components/ModePlan'
import {downloadFile} from 'utils'

export default {
  mixins: [pagingList],
  components: {
    SearchCard,
    ModePlan
  },
  computed: {
    ...mapGetters({
      mode_sport_list: 'mode_sport_list',
      mode_style_list: 'mode_style_list'
    })
  },
  mounted () {
    this.roleType = localStorage.getItem('role_type')
    this.isUpdate = true
    this.isShow = this.$route.query.isShow
    this.form.sportType = this.$route.query.sportType ? Number(this.$route.query.sportType) : ''
    this.form.keyword = this.$route.query.trainingName
    this.activeName = this.$route.query.auditStatus ? this.$route.query.auditStatus : '2'
    this.serachQuery.techDomainInfos = this.$route.query.techDomainInfos ? this.$route.query.techDomainInfos.split(',') : ['']
    this.serachQuery.trainingDurations = this.$route.query.trainingDurations ? this.$route.query.trainingDurations.split(',') : ['']
    this.serachQuery.teachingInfos = this.$route.query.teachingInfos ? this.$route.query.teachingInfos.split(',') : ['']
    this.serachQuery.trainingIntensions = this.$route.query.trainingIntensions ? this.$route.query.trainingIntensions.split(',') : ['']
    this.serachQuery.ageInfos = this.$route.query.ageInfos ? this.$route.query.ageInfos.split(',') : ['']
    this.serachQuery.scopeInfos = this.$route.query.scopeInfos ? this.$route.query.scopeInfos.split(',') : ['']
    this.query.auditStatus = this.activeName
    this.$store.dispatch('mode_sport_list', '')
  },
  watch: {
    'form.sportType': function (val) {
      this.query.sportType = val
    },
    'form.keyword': function (val) {
      this.query.trainingName = val
    },
    'isShow': function (val) {
      this.query.isShow = Boolean(val)
    },
    '$route': function () {
      if (JSON.stringify(this.$route.query) === '{}') {
        this.activeName = '2'
        this.serachQuery.techDomainInfos = ['']
        this.serachQuery.trainingDurations = ['']
        this.serachQuery.teachingInfos = ['']
        this.serachQuery.trainingIntensions = ['']
        this.serachQuery.ageInfos = ['']
        this.serachQuery.scopeInfos = ['']
        this.query.auditStatus = this.activeName
      }
    }
  },
  data () {
    return {
      loading: false, // 必需要返回loading
      setData: ModeData,
      activeName: '2',
      isShow: false,
      isUpdate: false,
      serachQuery: {
        techDomainInfos: [''],
        trainingDurations: [''],
        teachingInfos: [''],
        trainingIntensions: [''],
        ageInfos: [''],
        scopeInfos: ['']
      },
      roleType: '',
      query: this.getQuery({}),
      form: {
        sportType: '',
        keyword: ''
      }
    }
  },
  methods: {
    fetch (query) {
      this.query.sportType = this.form.sportType
      this.query.trainingName = this.form.keyword
      this.$store.dispatch('mode_style_list', query)
    },
    handleShowSearch () {
      this.isShow ? this.isShow = false : this.isShow = true
    },
    handleSearch (val) { // 搜索
      let newData = {}
      for (let i in val) {
        newData[i] = val[i].join(',')
      }
      Object.assign(this.query, newData)
      this.fetch(this.query)
    },
    handleTabClick () { // tab切换
      this.query.auditStatus = this.activeName
      this.mode_style_list.list = []
      this.fetch(this.query)
    },
    revereSportType: function (val) { // 获取运动类型
      let typeText = val
      if (this.mode_sport_list && this.mode_sport_list.length > 0) {
        this.mode_sport_list.forEach((item) => {
          if (item.fieldValue === val) {
            typeText = item.fieldName
          }
        })
      }
      return typeText
    },
    handleSetYes (val) { // 审核通过
      api.setYesAudit({id: val.id}, {options: this, successMsg: '已通过审核'}).then((res) => {
        this.fetch(this.query)
      })
    },
    handleSetNo (val) { // 拒绝审核
      api.setNoAudit({id: val.id}, {options: this, successMsg: '已拒绝审核'}).then((res) => {
        this.fetch(this.query)
      })
    },
    handleResubmit (val) { // 重新提交
      api.setResubmitAudit({id: val.id}, {options: this, successMsg: '已重新提交'}).then((res) => {
        this.fetch(this.query)
      })
    },
    handleDeLete (val) {
      this.$confirm('删除后将不可恢复，确认删除该训练方式吗？', '温馨提示', {type: 'warning'}).then(() => {
        api.addTrainStyle({id: val.id}, {context: this, type: 'DELETE', successMsg: '删除成功'}).then((res) => {
          this.fetch(this.query)
        })
      })
    },
    handleDetail (val) { // 详情&编辑
      let url = '/training/trainingprogram/mode/show'
      if (val.type === 'edit') {
        url = '/training/trainingprogram/mode/add'
      }
      this.$router.push({path: url, query: {id: val.data.id}})
    },
    handleExport (val) {
      let fileName = `训练方式《${val.trainingName}》.docx`
      let url = '/api/train/training/style/trainingStyleExport?trainStyleId=' + val.id
      downloadFile(url, fileName)
    }
  }
}
</script>

<style lang="scss" scoped>
.modemain_list{
  .list-title{
    margin:25px 0 10px;
  }
  .color_gray{
    color:#ccc;
    font-size: 12px;
  }
  .method-list {
    padding-top: 50px;
  }
}
</style>
<style lang="scss">
.modemain_list{
  .heading-1{
    margin:0;
  }
  .el-tabs__header{
    margin-bottom:0;
  }
  .swiper-nav {
    display: none;
  }
}
</style>
